<template>
  <div @click="jumpToInfo">
    <a-card hoverable class="item">
      <img slot="cover" alt="poster" :src="posterUrl" class ="poster"/>
      <a-card-meta :title="activityTitle" :description="activityDescription">
        <a-avatar slot="avatar" :src="avatarUrl" />
      </a-card-meta>
    </a-card>
    <slot></slot>
  </div>
</template>

<script>
import RequestUtils from "../../utils/requestUtils.js";
export default {
  name: "Activity",
  props: {
    posterSrc: {
      type: String,
      default: "",
    },
    activityTitle: String,
    activityDescription: String,
    publisherId: Number,
    activityId: Number,
  },
  data() {
    return {
      avatarUrl: require(`../../assets/avatar.jpg`),
      posterUrl: require(`../../assets/background.jpg`),
    };
  },
    created() {
    let that = this;
    if (that.posterSrc != null && that.posterSrc != "") {
      that.posterUrl = that.GLOBAL.site + "/" + that.posterSrc;
    }
    let callback = function (res) {
      console.log(res);
      let result = res.data.result;
      if (result.avatar != "" && result.avatar != null) {
        that.avatarUrl = that.GLOBAL.site + "/" + result.avatar;
      }
    };
    console.log("HHHHHHHHHHHHHHHHHHHHHHH");
    console.log(that.publisherId);
    RequestUtils.requestUserInfo(that, that.publisherId, callback, callback);
  },
  beforeUpdate() {
    let that = this;
    if(that.posterSrc == null || that.posterSrc == ""){
      that.posterUrl = require(`../../assets/background.jpg`);
    }
    if (that.posterSrc != null && that.posterSrc != "") {
      that.posterUrl = that.GLOBAL.site + "/" + that.posterSrc;
    }
    let callback = function (res) {
      console.log(res);
      let result = res.data.result;
      if (result.avatar != "" && result.avatar != null) {
        that.avatarUrl = that.GLOBAL.site + "/" + result.avatar;
      }
    };
    console.log("MMMMMMMMMMMMMMMMMMMMMMMMM");
    console.log(that.publisherId);
    RequestUtils.requestUserInfo(that, that.publisherId, callback, callback);
  },
  methods: {
    jumpToInfo() {
      let that = this;
      this.$router.push({
        path: `/activities/${that.activityId}`,
      });
    },
  },
};
</script>

<style scoped>
.item {
  width: 300px;
  margin-right: 30px;
  margin-bottom: 20px;
  user-select: none;
}

.poster{
  width: 298px;
  height: 167px;
}
</style>